<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.head{
				width: 100%;
				height: 70px;
				background: #242424;
			}
			.head_main{
				width: 1100px;
				height: 70px;
				/* background: pink; */
				margin: 0 auto;
			}
			.head_logo{
				width: 178px;
				height: 70px;
				float: left;
				/* background: palegoldenrod; */
			}
			.head_logo>span{
				float: left;
				background: url(img/topbar.png);
				/* background-position: 0px 0px; */
				width: 100%;
				height: 70px;
				line-height: 70px;
			}
			
			.head_nav{
				width: 540px;
				height: 70px;
				float: left;
				/* background: palegreen; */
				position: relative;
			}
			.head_nav>ul{
				width:512px;
				height: 70px;
				/* background: plum; */
				list-style: none;
			}
			.head_nav>ul>li{
				float: left;
				height: 70px;
			}
			.head_nav>ul>li>a{
				float: left;
				line-height: 70px;
				padding: 0px 16px;
				/* background: plum; */
				text-decoration: none;
				color: #cccccc;
			}
			.head_nav>ul>li>a:hover{
				background: black;
				color: white;
			}
			.head_nav>ul>li>.head_nav_icon{
				position: absolute;
				width: 12px;
				height: 7px;
				top: 64px;
				left: 50%;
				margin-left: -6px;
				background: url(img/topbar.png);
				background-position: -226px 0;
			}
			.head_nav>span{
				position: absolute;
				border-radius: 20px;
				/* background: palegoldenrod; */
				width: 26px;
				height: 13px;
				top: 20px;
				right: 8px;
				background-image: url(img/topbar.png);
				background-position: 288px 0px;
			}
			.head_right{
				width: 330px;
				height: 70px;
				float: right;
				/* background: paleturquoise; */
				font-size: 12px;
			}
			.head_right>.search{
				float: left;
				width: 160px;
				line-height: 70px;
				/* background: palegoldenrod; */
				position: relative;
			}
			.head_right>.search>input{
				outline: none;
				width: 108px;
				padding: 8px 24px;
				border-radius: 50px;
				font-size: 12px;
			}
			.head_right>.search>span{
				position: absolute;
				width: 14px;
				height: 14px;
				float: left;
				background: url(img/topbar.png);
				background-position: -8px 108px;
				left: 6px;
				top: 27px;
			}
			.head_right>a{
				text-decoration: none;
			}
			.head_right>.center{
				float: left;
				border: 1px solid #787878;
				height: 30px;
				line-height: 30px;
				padding: 0px 18px;
				border-radius: 30px;
				margin-top: 20px;
				color: #cccccc;
				margin-left: 16px;
			}
			.head_right>.center:hover{
				border: 1px solid white;
				color: white;
			}
			.head_right>.login{
				float: right;
				line-height: 70px;
				color: #787878;
				margin-right: 10px;
			}
			.head_right>.login:hover{
				text-decoration: underline;
				color: lightgray;
			}
			.head2{
				width: 100%;
				height: 35px;
				background: #c20c0c;
			}
			.head2_nav{
				width: 600px;
				height: 35px;
				/* background: palegreen; */
				margin-left: 400px;
			}
			.head2_nav>ul{
				list-style: none;
				width: 100%;
				height: 35px;
			}
			.head2_nav>ul>li{
				float: left;
				line-height: 35px;
				font-size: 12px;
				padding: 0px 6px;
			}
			.head2_nav>ul>li>a{
				color: white;
				text-decoration: none;
				border: 1px solid #C20C0C;
				border-radius: 20px;
				padding: 3px 14px;
				margin: 0px 10px;
			}
			.head2_nav>ul>li>a:hover{
				background: #9B0909;
			}
			.head2_nav>ul>li>span{
				background: url(img/R.png);
				position: absolute;
				width: 12px;
				height: 12px;
				top: 8px;
				right: 18px;
			}
			#scroll{
				width: 100%;
				height: 285px;
				background-image: url(img/banner1.png);
				background-size: 6000px;
				
			}
			.scroll_box{
				width: 1100px;
				height: 285px;
				margin: 0 auto;
				/* background: palegreen; */
			}
			.scroll_main{
				float: left;
				width: 1000px;
				height: 285px;
				margin-left: 13px;
				background: pink;
			}
			#banner{
				float: left;
				width: 746px;
				height: 285px;
				overflow: hidden;
				position: relative;
				cursor: pointer;
			}
			#banner_ul{
				width: 746px;
				height: 285px;
				position: relative;
			}
			#banner_ul>li{
				width: 746px;
				height: 285px;
				list-style: none;
				position: absolute;
				top: 0px;
				left: 0px;
				opacity: 0;
				z-index: 1;
				transition: all 2s;
			}
			#banner_ul>li>img{
				width: 100%;
				height: 100%;
				
			}
			#cricle{
				position: absolute;
				bottom: 26px;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(255,255,255,0.3);
				padding: 4px 8px;
				border-radius: 50px;
				z-index: 4;
			}
			#cricle>li{
				list-style: none;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: white;
				float: left;
				margin-right: 8px;
				cursor: pointer;
				transition: all 2s;
			}
			.download{
				float: right;
				width: 254px;
				height: 285px;
				background: url(img/download.png);
				position: relative;
				text-align: center;
			}
			.download>a>span{
				display: block;
				width: 215px;
				height: 56px;
				margin: 187px 0 0 19px;
				background: url(img/download.png);
				/* background: pink; */
				background-position: 0px 62px;
			}
			.download>a>span:hover{
				display: none;
			}
			.download>p{
				position: absolute;
				/* display: block; */
				bottom: 4px;
				font-size: 12px;
				color: #8d8d8d;
				padding: 8px 12px;
				text-align: center;
			}
			#bt_left{
				float: left;
				width: 37px;
				height: 64px;
				background: url(img/banner.png);
				background-position: 0px -360px;
				margin-top: 110px;
				cursor: pointer;
			}
			#bt_left:hover{
				background: url(img/banner.png);
				background-position: 0px -430px;
			}
			#bt_right{
				float: right;
				width: 37px;
				height: 64px;
				background: url(img/banner.png);
				background-position: 0px -510px;
				margin-top: 110px;
				cursor: pointer;
			}
			#bt_right:hover{
				background: url(img/banner.png);
				background-position: 0px -580px;
			}
			.main{
				width: 1000px;
				height: 1402px;
				margin: 0 auto;
				background: white;
			}
			.main_left{
				float: left;
				width: 744px;
				height: 1400px;
				background: white;
				border: 1px solid lightgray;
			}
			.main_left>.hot{
				width: 700px;
				margin: 0 auto;
				/* background: pink; */
				margin-top: 16px;
			}
			.main_left>.hot>.hot_nav{
				width: 100%;
				height: 35px;
				border-bottom:2px solid #C20C0C;
				/* background: palegreen; */
			}
			.dian{
				float: left;
				width: 35px;
				height: 35px;
				background: url(img/index.png);
				background-position:600px 312px;
			}
			.title1{
				float: left;
				width: 80px;
				height: 35px;
				font-size: 20px;
				line-height: 35px;
				color: black;
			}
			.hot_nav>ul{
				float: left;
				width: 400px;
				height: 35px;
				list-style: none;
				margin-left: 12px;
				font-size: 12px;
				color: #666;
			}
			.hot_nav>ul>li{
				float: left;
				line-height: 35px;
				padding: 0px 6px;
			}
			.hot_nav>ul>li>a{
				text-decoration: none;
				color: #666;
			}
			.hot_nav>ul>li>a:hover{
				text-decoration: underline;
			}
			.more{
				float: right;
				font-size: 12px;
				line-height: 35px;
				margin-right: 6px;
			}
			.more>a{
				float: left;
				text-decoration: none;
				color: #666;
			}
			.more>a:hover{
				text-decoration: underline;
			}
			.more>span{
				float: right;
				width: 12px;
				height: 12px;
				background: url(img/index.png);
				margin-left: 4px;
				margin-top: 12px;
				background-position: 0px 225px;
			}
			.hot_main{
				width: 100%;
				height: 500px;
				/* background: palegoldenrod; */
			}
			.hot_main>ul{
				width: 100%;
				list-style: none;
			}
			.hot_main>ul>li{
				float: left;
				width: 145px;
				height: 222px;
				/* background: paleturquoise; */
				margin-left: 40px;
				margin-top: 20px;
			}
			.hot_img{
				width: 145px;
				height: 145px;
				position: relative;
			}
			
			.hot_img>div{
				position: absolute;
				width: 145px;
				height: 28px;
				bottom: 0px;
				background: rgba(0,0,0,0.5);
			}
			
			.hot_img>div>.hot_sp1{
				float: left;
				width: 14px;
				height: 11px;
				/* line-height: 28px; */
				background: url(img/iconall.png);
				background-position: 0 -24px;
				margin: 8px 0px 0px 10px;
			}
			.hot_img>div>a>.hot_sp2{
				float: right;
				width: 16px;
				height: 17px;
				/* line-height: 28px; */
				background: url(img/iconall.png);
				margin: 5px 10px 0px 0px;
			}
			.hot_img>div>a:hover>.hot_sp2{
				background-position: 0 -60px;
			}
			.hot_img>div>p{
				float: left;
				font-size: 12px;
				color: #CCCCCC;
				margin-left: 5px;
				line-height: 28px;
			}
			.jianjie{
				text-decoration: none;				
				color: black;
			}
			.jianjie:hover>p{
				text-decoration: underline;
			}
			.jianjie>span{
				background: url(img/icon.png);
				width: 35px;
				height: 15px;
				background-position: -31px -658px;
				/* background: pink; */
				float: left;
				margin: 13px 6px 0px 0px;
			}
			.jianjie>p{
				margin-top: 10px;
				font-size: 14px;
			}
			.new_main{
				width: 100%;
				height: 190px;
				background: #f5f5f5;
				border: 1px solid lightgray;
				margin-top: 20px;
			}
			.new_main_left{
				float: left;
				width: 17px;
				height: 17px;
				/* background: palegreen; */
				background: url(img/index.png);
				background-position: -260px -75px;
				margin-top: 70px;
				margin-left: 8px;
			}
			.new_main_left:hover{
				background-position: -280px -75px;
			}
			.new_main_right{
				float: left;
				width: 17px;
				height: 17px;
				background: palegreen;
				background: url(img/index.png);
				background-position: -300px -75px;
				margin-top: 70px;
			}
			.new_main_right:hover{
				background-position: -320px -75px;
			}
			.new_main>div{
				float: left;
				width: 650px;
				height: 150px;
				margin: 30px 0px;
				/* background: palegoldenrod; */
			}
			
			.new_main>div>ul{
				width: 100%;
				list-style: none;
			}
			.new_main>div>ul>li{
				width: 100px;
				height: 150px;
				float: left;
				margin: 0px 15px;
				/* background: pink; */
			}
			.new_main>div>ul>li>div{
				width: 118px;
				height: 100px;
				background: url(img/coverall.png);
				background-position: 0px -570px;
				position: relative;
				box-shadow: 0px 12px 10px -12px black;
			}
			.new_main>div>ul>li>div>a>img{
				opacity: 0.8;
			}
			.new_main>div>ul>li>div:hover>a>span{
				display: block;
			}
			.new_main>div>ul>li>div>a>span{
				display: none;
				position: absolute;
				width: 30px;
				height: 30px;
				right: 24px;
				bottom: 6px;
				background: url(img/iconall.png);
				background-position: -38px -18px;
			}
			.new_main>div>ul>li>div>a>span:hover{
				background-position: -38px -48px;
			}
			.new_main>div>ul>li>a{
				font-size: 12px;
				text-decoration: none;
			}
			.new_main>div>ul>li>a:hover{
				text-decoration: underline;
			}
			.title2{
				color: black;
				margin: 10px 0px 4px 0px;
			}
			.writer{
				color: #666666;
			}
			.list_main{
				width: 698px;
				height: 440px;
				background: #f5f5f5;
				border: 1px solid lightgray;
				margin-top: 20px;
			}
			.list_main>dl{
				float: left;
				width: 232px;
				/* background: paleturquoise;	 */
			}
			.list_main>dl>dt{
				width: 100%;
				height: 120px;
				/* background: pink; */
			}
			.list_main>dl>dt>a>img{
				float: left;
				margin: 20px 0px 20px 20px;
				box-shadow: 0px 12px 10px -12px black;
			}
			.list_main>dl>dt>div{
				float: left;
				width: 80px;
				height: 60px;
				/* background: palegreen; */
				margin: 25px 0px 35px 10px;
			}
			.list_main>dl>dt>div>.list_title{
				font-size: 14px;
				font-weight: bolder;
				text-decoration: none;
				color: black;
			}
			.list_main>dl>dt>div>.list_title:hover{
				text-decoration: underline;
			}
			.list_main>dl>dt>div>div{
				margin-top: 10px;
				width: 80px;
				height: 22px;
			}
			.list_main>dl>dt>div>div>a>span{
				float: left;
				width: 22px;
				height: 22px;
				background: url(img/index.png);
			}
			.list_main>dl>dt>div>div>a>.list_bofang{
				background-position: -267px -205px;
			}
			.list_main>dl>dt>div>div>a:hover>.list_bofang{
				background-position: -267px -235px;
			}
			.list_main>dl>dt>div>div>a>.list_jia{
				margin-left: 10px;
				background-position: -300px -205px;
			}
			.list_main>dl>dt>div>div>a:hover>.list_jia{
				background-position: -300px -235px;
			}
			.list_main>dl>dd{
				width: 100%;
				height: 320px;
				/* background: palegreen; */
			}
			.list_main>dl>dd>ul{
				width: 100%;
				list-style: none;
			}
			.list_main>dl>dd>ul>li{
				width: 100%;
				height: 32px;
				line-height: 32px;
				background: #f5f5f5;
			}
			.list_main>dl>dd>ul>li:nth-last-of-type(2n){
				background: rgb(232,232,232);
			}
			.list_main>dl>dd>ul>li>span{
				float: left;
				margin-left: 20px;
				color: #666666;
			}
			.list_main>dl>dd>ul>li>a{
				float: left;
				margin-left: 16px;
				text-decoration: none;
				font-size: 12px;
				color: #000000;
			}
			.list_main>dl>dd>ul>li>a:hover{
				text-decoration: underline;
			}
			.list_main>dl>dd>ul>li:hover>div{
				display: block;
			}
			.list_main>dl>dd>ul>li>div{
				display: none;
				float: right;
				width: 70px;
				height: 20px;
				margin-top: 6px;
				margin-right: 10px;
				/* background: palegoldenrod; */
			}
			.list_main>dl>dd>ul>li>div>a>span{
				float: left;
				width: 20px;
				height: 20px;
			}
			.list_main>dl>dd>ul>li>div>a>.one{
				background: url(img/index.png);
				background-position: -266px -266px;
			}
			.list_main>dl>dd>ul>li>div>a>.one:hover{
				background-position: -266px -286px;
			}
			.list_main>dl>dd>ul>li>div>a>.two{
				margin-left: 4px;
				background: url(img/icon.png);
				background-position: 4px -696px;
			}
			.list_main>dl>dd>ul>li>div>a>.two:hover{
				background-position: -18px -696px;
			}
			.list_main>dl>dd>ul>li>div>a>.three{
				margin-left: 6px;
				background: url(img/index.png);
				background-position: -296px -266px;
			}
			.list_main>dl>dd>ul>li>div>a>.three:hover{
				background-position: -296px -286px;
			}
			.main_right{
				float: right;
				width: 252px;
				height: 1400px;
				background: white;
				border: 1px solid lightgray;
			}
			.main_right>.login_box{
				width: 252px;
				height: 126px;
				margin-left: 1px;
				background: url(img/index.png);
				background-position: 0px 0px;
				/* border: 1px solid lightgray; */
			}
			.main_right>.login_box>p{
				width: 205px;
				height: 58px;
				padding-top: 16px;
				font-size: 12px;
				line-height: 22px;
				margin: 0px auto;
			}
			.main_right>.login_box>a{
				text-decoration: none;
				font-size: 12px;
				color: white;
			}
			.main_right>.login_box>a>span{
				display: block;
				width: 100px;
				height: 31px;
				margin: 0px auto;
				text-align: center;
				line-height: 31px;
				background: url(img/index.png);
				background-position: 0px -195px;
			}
			.main_right>.login_box>a>span:hover{
				background-position: -110px -195px;
			}
			.main_right>.singer{
				width: 210px;
				height: 510px;
				/* background: pink; */
				margin: 20px auto 0px auto;
			}
			.singer_title{
				width: 210px;
				height: 24px;
				margin: 0 auto;
				/* background: paleturquoise; */
				font-size: 12px;
				border-bottom: 1px solid lightgray;
			}
			.singer_title>p{
				float: left;
				font-weight: bolder;
			}
			.main_right>.singer>.singer_title>a{
				float: right;
				text-decoration: none;
				color: #666666;
			}
			.main_right>.singer>.singer_title>a:hover{
				text-decoration: underline;
			}
			.main_right>.singer>.singer_list{
				width: 210px;
				height: 430px;
				/* background: palegreen; */
			}
			.main_right>.singer>.singer_list>ul>li{
				list-style: none;
				background: #f5f5f5;
			}
			.main_right>.singer>.singer_list>ul>li:hover>a>div{
				background: #e3e3e3;
			}
			.main_right>.singer>.singer_list>ul>li>a>img{
				float: left;
				margin-top: 20px;
			}
			.main_right>.singer>.singer_list>ul>li>a>div{
				float: left;
				width: 146px;
				height: 60px;
				margin-top: 20px;
				background: #f5f5f5;
				border: 1px solid lightgray;
			}
			.main_right>.singer>.singer_list>ul>li>a>div>p{
				margin-left: 14px;
				margin-top: 8px;
			}
			.main_right>.singer>.singer_list>ul>li>a>div>.name1{
				font-size: 14px;
				font-weight: bolder;
				color: #333333;
			}
			.main_right>.singer>.singer_list>ul>li>a>div>.name2{
				font-size: 12px;
				color: #666666;
			}
			.main_right>.singer>a{
				font-size: 12px;
				color: #333;
				text-decoration: none;
				font-weight: bolder;
			}
			.main_right>.singer>a>span{
				display: block;
				width: 210px;
				height: 31px;
				line-height: 31px;
				/* background: plum; */
				text-align: center;
				background: url(img/button2.png);
				background-position: -252px -305px; 
				border-radius: 5px;
				border: 1px solid lightgray;
			}
			.main_right>.singer>a>span:hover{
				background-position: -252px -141px;
			}
			.main_right>.host>.host_list{
				width: 210px;
				height: 400px;
				/* background: pink; */
				margin: 0px auto;
			}
			.main_right>.host>.host_list>ul{
				width: 100%;
				height: 300px;
				list-style: none;
				/* background: palegoldenrod; */
			}
			.main_right>.host>.host_list>ul>li{
				width: 100%;
				height: 40px;
				margin-top: 20px;
			}
			.main_right>.host>.host_list>ul>li>a>img{
				float: left;
			}
			.main_right>.host>.host_list>ul>li>div{
				float: left;
				font-size: 12px;
				margin-left: 10px;
			}
			.main_right>.host>.host_list>ul>li>div>a{
				text-decoration: none;
			}
			.main_right>.host>.host_list>ul>li>div>a:hover{
				text-decoration: underline;
			}
			.main_right>.host>.host_list>ul>li>div>a>.host_name1{
				color: black;
				margin-top: 4px;
			}
			.main_right>.host>.host_list>ul>li>div>.host_name2{
				color: #666666;
				margin-top: 4px;
			}
			.bottom{
				width: 100%;
				height: 160px;
				background: #f5f5f5;
				border-top: 1px solid lightgray;
			}
			.back_top{
				display: none;
				color: #333333;
				font-size: 12px;
			}
			.back_top:hover>div{
				background: #e3e3e3;
			}
			.back_top>div{
				
				width: 50px;
				height: 50px;
				border: 2px solid lightgray;
				position: absolute;
				right: 180px;
				top: 600px;
				text-align: center;
				position: fixed;
			}
			.back_top>div>p{
				padding: 3px 0px;
			}
			.bottom_main {
			    width: 100%;
			    height: 60px;
				/* background-color: pink; */
			    position: absolute;
			    bottom: -40px;
			    transition: all 1s;
				position: fixed;
			}
			.bottom_main:hover {
			    bottom: 0px;
			}
			.bgd {
			    width: 100%;
			    background-image: url(img/playbar.png);
			    height: 40px;
			    background-position: 0px -10px;
			    position: absolute;
			    top: 20px;
			    z-index: 7;
			}
			.bottom_main_left {
			    width: 106px;
			    height: 40px;
				/* background-color: skyblue; */
			    float: left;
			    margin-left: 300px;
			}
			.bottom_main span{
			    display: block;
			    float: left;
			}
			.left {
			    height: 26px;
			    width: 26px;
			    margin-top: 10px;
			    background-image: url(img/playbar.png);
			    background-position: -1px -131px;
			}
			.left:hover {
			    background-position: -31px -131px;
			}
			.stop {
			    height: 35px;
			    width: 35px;
			    margin-top: 3px;
			    margin-left: 8px;
			    background-image: url(img/playbar.png);
			    background-position: -152px -204px;
			}
			.stop:hover {
			    background-position: -192px -204px;
			}
			.right {
			    height: 26px;
			    width: 26px;
			    margin-top: 10px;
			    margin-left: 8px;
			    background-image: url(img/playbar.png);
			    background-position: -80px -131px;
			}
			.right:hover {
			    background-position: -110px -131px;
			}
			.pic {
			    height: 35px;
			    width: 35px;
				/* background-color: black; */
			    float: left;
			    margin-top: 3px;
			    margin-left: 20px;
			    background-image: url(img/playbar.png);
			    background-position: 0px -80px;
			    border-radius: 2px;
			    text-align: center;
			}
			.pic img {
			    width: 30px;
			    height: 30px;
			    margin-top: 2px;
			    border-radius: 2px;
			}
			.progress {
			    float: left;
				/* background: blue; */
			    width: 400px;
			    height: 8px;
			    border-radius: 50px;
			    background-image: url(img/statbar.png);
			    background-position: 0px 0px;
			    position: relative;
			    margin-top: 24px;
			    margin-left: 8px;
			}
			.bottom_dian {
			    width: 14px;
			    height: 14px;
				border-radius: 50%;
				position: absolute;
			    top: -3px;
			    left: 0px;
			    background-color: black;
			    background-image: url(img/01.png);
			    background-position: -42px -252px;
			}
			.time {
			    width: 72px;
				position: absolute;
			    top: -4px;
			    left: 420px;
			    font-size: 10px; 
			}
			.time1 {
			    color: lightgray;
			}
			.time2 {
			    color: #838383;
			}
			.bottom_more {
			    width: 214px;
			    height: 22px;
				/* background-color: pink; */
				position: absolute;
				top: -12px;
			    left: 530px;
			}
			.pip{
				height: 18px;
				width: 18px;
				background-image: url(img/pip.jpg);
				background-position: -5px -3px;
			}
			.pip:hover {
			    background-position: -5px -28px;
			}
			.bottom_jia {
			    height: 18px;
			    width: 18px;
				margin-left: 8px;
			    background-image: url(img/playbar.png);
			    background-position: -92px -166px;
			}
			.bottom_jia:hover {
			    background-position: -92px -192px;
			}
			.share {
			    height: 18px;
			    width: 18px;
			    margin-left: 8px;
			    background-image: url(img/playbar.png);
			    background-position: -118px -166px;
			}
			.share:hover {
			    background-position: -118px -192px;
			}
			
			.voice {
			    height: 18px;
			    width: 20px;
			    margin-left: 12px;
			    background-image: url(img/playbar.png);
			    background-position: -5px -251px;
			}
			.voice:hover {
			    background-position: -34px -251px;
			}
			.loop {
			    height: 18px;
			    width: 20px;
			    margin-left: 8px;
			    background-image: url(img/playbar.png);
			    background-position: -5px -347px;
			}
			.loop:hover {
			    background-position: -35px -347px;
			}
			.bottom_list {
			    height: 22px;
			    width: 56px;
			    margin-left: 8px;
			    background-image: url(img/playbar.png);
			    background-position: -198px -70px;
			    color: #838383;
			    box-sizing: border-box;
			    font-size: 10px;
			    line-height: 22px;
			    padding-left: 32px;
			}
			.bottom_list:hover {
			    background-position: -198px -100px;
			}
			.shu {
			    width: 1px;
			    height: 18px;
			    margin-left: 8px;
			    background-color: black;
			}
			.suo {
			    position: absolute;
			    right: 30px;
			    top: -20px;
			    background-image: url(img/playbar.png);
			    background-position: 0px -380px;
			    height: 60px;
			    width: 66px;
			    /* background-color: plum; */
			}
			.lock {
			    width: 18px;
			    height: 18px;
			    background-image: url(img/playbar.png);
			    background-position: 72px -380px;
			    position: absolute;
			    left: 16px;
			    top: 6px;
			    /* background-color: pink; */
			}
			.lock:hover {
			    background-position: 72px -400px;
			}
		</style>
	</head>
	<body bgcolor="#f5f5f5">
		<div class="head" id="top">
			<div class="head_main">
				<a href="#">
					<div class="head_logo">
						<span></span>
					</div>
				</a>
				<div class="head_nav">
					<ul>
						<li style="position: relative;">
							<a href="" style="background: black;color: white;">发现音乐</a>
							<span class="head_nav_icon"></span>
						</li>
						<li><a href="">我的音乐</a></li>
						<li><a href="">朋友</a></li>
						<li><a href="">商城</a></li>
						<li><a href="">音乐人</a></li>
						<li><a href="">下载客户端</a></li>
					</ul>
					<span></span>
				</div>
				<div class="head_right">
					<div class="search">
						<input placeholder="音乐/视频/电台/用户" onfocus="this.placeholder=''" onblur="this.placeholder='音乐/视频/电台/用户'"/>
						<span></span>
					</div>
					<a href="" class="center">创作者中心</a>
					<a href="" class="login">登录</a>
				</div>
			</div>
		</div>
		<div class="head2">
			<div class="head2_nav">
				<ul>
					<li><a href="" style="background: #9B0909;">推荐</a></li>
					<li><a href="">排行榜</a></li>
					<li style="position: relative;">
						<a href="">歌单</a>
						<span></span>
					</li>
					<li><a href="">主播电台</a></li>
					<li><a href="">歌手</a></li>
					<li><a href="">新碟上架</a></li>
				</ul>
			</div>
		</div>
		<div id="scroll">
			<div class="scroll_box">
				<span id="bt_left"></span>
				<div class="scroll_main">
					<div id="banner">
						<ul id="banner_ul">
							<li style="opacity: 1;z-index: 2;"><img src="img/banner1.png" ></li>
							<li><img src="img/banner2.png" ></li>
							<li><img src="img/banner3.png" ></li>
							<li><img src="img/banner4.png" ></li>
							<li><img src="img/banner5.png" ></li>
							<li><img src="img/banner6.png" ></li>
						</ul>
						<ul id="cricle">
							<li style="background: #c20c0c;"></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li style="margin-right: 0px;"></li>
						</ul>
					</div>
					<div class="download">
						<a href=""><span></span></a>
						<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
					</div>
				</div>
				<span id="bt_right"></span>
			</div>
		</div>
		<div class="main">
			<div class="main_left">
				<div class="hot">
					<div class="hot_nav">
						<span class="dian"></span>
						<a href=""><p class="title1">热门推荐</p></a>
						<ul>
							<li><a href="">华语</a></li>
							<li>|</li>
							<li><a href="">流行</a></li>
							<li>|</li>
							<li><a href="">摇滚</a></li>
							<li>|</li>
							<li><a href="">民谣</a></li>
							<li>|</li>
							<li><a href="">电子</a></li>
						</ul>
						<div class="more">
							<a href="">更多</a>
							<span></span>
						</div>
					</div>
					<div class="hot_main">
						<ul>
							<li style="margin-left: 0px;">
								<div class="hot_img">
									<a href=""><img src="img/hot1.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>48158万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<p>[一周新歌推荐] 薛之谦爱情哲思新单，娓娓道来生活里的婉转情愫</p>
								</a>
							</li>
							<li>
								<div class="hot_img">
									<a href=""><img src="img/hot2.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>40万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<p>食我的枪吧（玩马超必备歌单）</p>
								</a>
							</li>
							<li>
								<div class="hot_img">
									<a href=""><img src="img/hot3.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>339万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<p>我应该比你更爱这个世界</p>
								</a>
							</li>
							<li>
								<div class="hot_img">
									<a href=""><img src="img/hot4.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>19385万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<span></span>
									<p> 女友把韩剧代入生活，我该怎么办？</p>
								</a>
							</li>
							<li style="margin-left: 0px;">
								<div class="hot_img">
									<a href=""><img src="img/hot5.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>1423万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<p>你-总是有各种理由让我放弃你☹</p>
								</a>
							</li>
							<li>
								<div class="hot_img">
									<a href=""><img src="img/hot6.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>221万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<span></span>
									<p> Vol2.聊聊出国旅行之前最需要准备什么</p>
								</a>
							</li>
							<li>
								<div class="hot_img">
									<a href=""><img src="img/hot7.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>454万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<p>如果再给我一次机会你还会选择走吗</p>
								</a>
							</li>
							<li>
								<div class="hot_img">
									<a href=""><img src="img/hot8.png" width="145px" height="145px"></a>
									<div>
										<span class="hot_sp1"></span>
										<p>219万</p>
										<a href=""><span class="hot_sp2"></span></a>
									</div>
								</div>
								<a href="" class="jianjie">
									<span></span>
									<p> 正负极</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="hot">
					<div class="hot_nav" style="margin-top: -20px;">
						<span class="dian"></span>
						<a href=""><p class="title1">新碟上架</p></a>
						<div class="more">
							<a href="">更多</a>
							<span></span>
						</div>
					</div>
					<div class="new_main">
						<a href=""><span class="new_main_left"></span></a>
						<div>
							<ul>
								<li>
									<div>
										<a href=""><img src="img/new1.png" width="100px" height="100px"/></a>
										<a href=""><span></span></a>
									</div>
									<a href="" class="title2">终点起点</a><br>
									<a href="" class="writer">鱼丁糸</a>
								</li>
								<li>
									<div>
										<a href=""><img src="img/new2.png" width="100px" height="100px"/></a>
										<a href=""><span></span></a>
									</div>
									<a href="" class="title2">Planet Her</a><br>
									<a href="" class="writer">Doja Cat</a>
								</li>
								<li>
									<div>
										<a href=""><img src="img/new3.png" width="100px" height="100px"/></a>
										<a href=""><span></span></a>
									</div>
									<a href="" class="title2">HAVE A DAY</a><br>
									<a href="" class="writer">魏如萱</a>
								</li>
								<li>
									<div>
										<a href=""><img src="img/new4.png" width="100px" height="100px"/></a>
										<a href=""><span></span></a>
									</div>
									<a href="" class="title2">White Stallion</a><br>
									<a href="" class="writer">Kaz</a>
								</li>
								<li>
									<div>
										<a href=""><img src="img/new5.png" width="100px" height="100px"/></a>
										<a href=""><span></span></a>
									</div>
									<a href="" class="title2">JORDI (Deluxe)</a><br>
									<a href="" class="writer">Maroon 5</a>
								</li>
							</ul>
						</div>
						<a href=""><span class="new_main_right"></span></a>
					</div>
				</div>
				<div class="hot" style="margin-top: 40px;">
					<div class="hot_nav">
						<span class="dian"></span>
						<a href=""><p class="title1">榜单</p></a>
						<div class="more">
							<a href="">更多</a>
							<span></span>
						</div>
					</div>
					<div class="list_main">
						<dl style="border-right: 1px solid lightgray;">
							<dt>
								<a href=""><img src="img/list1.png" width="80px" height="80px"/></a>
								<div>
									<a href="" class="list_title">飙升榜</a>
									<div>
										<a href=""><span class="list_bofang"></span></a>
										<a href=""><span class="list_jia"></span></a>
									</div>
									
								</div>
							</dt>
							<dd>
								<ul>
									<li>
										<span style="color: #c10d0c;">1</span>
										<a href="">还是劈开</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span style="color: #c10d0c;">2</span>
										<a href="">骁</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span style="color: #c10d0c;">3</span>
										<a href="">the lakes</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>4</span>
										<a href="">想说</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>5</span>
										<a href="">断掉了的爱</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>6</span>
										<a href="">时光背面的我</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>7</span>
										<a href="">万疆</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>8</span>
										<a href="">好事要发生</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>9</span>
										<a href="">雾里</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<a href="" style="float: right;margin-right: 20px;">查看全部></a>
									</li>
								</ul>
							</dd>
						</dl>
						<dl style="border-right: 1px solid lightgray;">
							<dt>
								<a href=""><img src="img/list2.png" width="80px" height="80px"/></a>
								<div>
									<a href="" class="list_title">新歌榜</a>
									<div>
										<a href=""><span class="list_bofang"></span></a>
										<a href=""><span class="list_jia"></span></a>
									</div>
									
								</div>
							</dt>
							<dd>
								<ul>
									<li>
										<span style="color: #c10d0c;">1</span>
										<a href="">变废为宝</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span style="color: #c10d0c;">2</span>
										<a href="">Stay</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span style="color: #c10d0c;">3</span>
										<a href="">生活在别处的你</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>4</span>
										<a href="">Edamame</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>5</span>
										<a href="">骁</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>6</span>
										<a href="">我们俩</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>7</span>
										<a href="">Moon Halo</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>8</span>
										<a href="">照亮黑夜的太阳</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>9</span>
										<a href="">Coloratura</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<a href="" style="float: right;margin-right: 20px;">查看全部></a>
									</li>
								</ul>
							</dd>
						</dl>
						<dl>
							<dt>
								<a href=""><img src="img/list3.png" width="80px" height="80px"/></a>
								<div>
									<a href="" class="list_title">原创榜</a>
									<div>
										<a href=""><span class="list_bofang"></span></a>
										<a href=""><span class="list_jia"></span></a>
									</div>
									
								</div>
							</dt>
							<dd>
								<ul>
									<li>
										<span style="color: #c10d0c;">1</span>
										<a href="">毕业留言</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span style="color: #c10d0c;">2</span>
										<a href="">不如放过</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span style="color: #c10d0c;">3</span>
										<a href="">轮到你</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>4</span>
										<a href="">SAUCERBOI</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>5</span>
										<a href="">Birth 起点</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>6</span>
										<a href="">逃避型社交</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>7</span>
										<a href="">爱分先后吗</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>8</span>
										<a href="">拿捏</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<span>9</span>
										<a href="">你呀 我呀</a>
										<div>
											<a href=""><span class="one"></span></a>
											<a href=""><span class="two"></span></a>
											<a href=""><span class="three"></span></a>
										</div>
									</li>
									<li>
										<a href="" style="float: right;margin-right: 20px;">查看全部></a>
									</li>
								</ul>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<div class="main_right">
				<div class="login_box">
					<p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
					<a href=""><span>用户登录</span></a>
				</div>
				<div class="singer">
					<div class="singer_title">
						<p>入驻歌手</p>
						<a href="">查看全部 ></a>
					</div>
					<div class="singer_list">
						<ul>
							<li>
								<a href="">
									<img src="img/singer1.png"/>
									<div class="singer_name">
										<p class="name1">张惠妹aMEI</p>
										<p class="name2">台湾歌手张惠妹</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/singer2.png"/>
									<div class="singer_name">
										<p class="name1">Fine乐团</p>
										<p class="name2">独立音乐人</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/singer3.png"/>
									<div class="singer_name">
										<p class="name1">萬曉利</p>
										<p class="name2">民谣歌手</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/singer4.png"/>
									<div class="singer_name">
										<p class="name1">音乐人赵雷</p>
										<p class="name2">民谣歌手</p>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<img src="img/singer5.png"/>
									<div class="singer_name">
										<p class="name1">王三溥</p>
										<p class="name2">音乐人</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<a href=""><span>申请成为网易音乐人</span></a>
				</div>
				<div class="host">
					<div class="singer_title">
						<p>热门主播</p>
					</div>
					<div class="host_list">
						<ul>
							<li>
								<a href=""><img src="img/host1.png"/></a>
								<div>
									<a href=""><p class="host_name1">陈立</p></a>
									<p class="host_name2">心理学家、美食家陈立教授</p>
								</div>
							</li>
							<li>
								<a href=""><img src="img/host2.png"/></a>
								<div>
									<a href=""><p class="host_name1">刘维-Julius</p></a>
									<p class="host_name2">歌手、播客节目《维维道来》</p>
								</div>
							</li>
							<li>
								<a href=""><img src="img/host3.png"/></a>
								<div>
									<a href=""><p class="host_name1">莫非定律MoreFeel</p></a>
									<p class="host_name2">男女双人全创作独立乐团</p>
								</div>
							</li>
							<li>
								<a href=""><img src="img/host4.png"/></a>
								<div>
									<a href=""><p class="host_name1">碎嘴许美达</p></a>
									<p class="host_name2">脱口秀网络红人</p>
								</div>
							</li>
							<li>
								<a href=""><img src="img/host5.png"/></a>
								<div>
									<a href=""><p class="host_name1">银临Rachel</p></a>
									<p class="host_name2">古风音乐人</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			
		</div>
		<a href="#top" class="back_top" id="back_top">
			<div >
				<p>^</p>
				<p>TOP</p>
			</div>
		</a>
		<div class="bottom_main" id="bottom">
		    <div class="bgd">
		        <div class="bottom_main_left">
		            <span class="left"></span>
		            <span class="stop"></span>
		            <span class="right"></span>
		        </div>
		        <div class="pic">
		            <img src="http://s4.music.126.net/style/web2/img/default/default_album.jpg" alt="">
		        </div>
		        <div class="progress">
		            <div class="bottom_dian"></div>
		            <div class="time">
		                <span class="time1">00:00 </span>
		                <span class="time2"> / 00:00</span>
		            </div>
		            <div class="bottom_more">
						<span class="pip"></span>
		                <span class="bottom_more"></span>
		                <span class="share"></span>
		                <span class="shu"></span>
		                <span class="voice"></span>
		                <span class="loop"></span>
		                <span class="bottom_list">0</span>
		            </div>
		        </div>
		        <div class="suo">
		            <span class="lock" id="lock"></span>
		        </div>
		    </div>
		</div>
		
		
		<script type="text/javascript">
			window.onscroll = function() {
				scrollFunction()
				};
			function scrollFunction() {
			    if (document.documentElement.scrollTop > 100) {
			        document.getElementById("back_top").style.display = "block";
			    } else {
			        document.getElementById("back_top").style.display = "none";
			    }
			}
			var lock = document.getElementById("lock");
            var bt = document.getElementById("bottom");
            var b=0;
            lock.onclick=function(){
                if(b%2==0){
                    bt.style.bottom = "0px";
                    lock.style.backgroundPosition = "54px -400px"
                    lock.onmouseover = function(){
                       lock.style.backgroundPosition = "54px -400px" 
                    }
                    lock.onmouseout = function(){
                       lock.style.backgroundPosition = "54px -380px" 
                    }
                    b++;
                }else{
                    bt.style.bottom = "-40px";
                    lock.style.backgroundPosition = "72px -400px"
                    lock.onmouseover = function(){
                       lock.style.backgroundPosition = "72px -400px" 
                    }
                    lock.onmouseout = function(){
                       lock.style.backgroundPosition = "72px -380px" 
                    }
                    b++;
                }
            }
			
			
			var banner_ul = document.getElementById("banner_ul");
			var banner_li = document.getElementById("banner_ul").children;
			var banner = document.getElementById("banner");
			var left_btn = document.getElementById("bt_left");
			var right_btn = document.getElementById("bt_right"); 
			var bg =  document.getElementById("scroll");
			//存放背景图
			var picture = ['img/banner1.png', 'img/banner2.png', 'img/banner3.png', 'img/banner4.png', 'img/banner5.png', 'img/banner6.png'];
			// 获取ul的子级组成数组
			var cricle = document.getElementById("cricle").children;
			var i=0;
			// 封装
			function Interval_banner(){
				i++;
				if(i==6){
					i = 0;
				}
				Banner_ul();
			}
			//透明度，层级
			function Banner_opacity(){
				for(var m=0;m<banner_li.length;m++){
					banner_li[m].style.opacity = "0";
					banner_li[m].style.zIndex = "1";
				}
				banner_li[i].style.opacity = "1";
				banner_li[i].style.zIndex = "2";
			}
			
			// 轮播定时器
			var timer = setInterval(Interval_banner,2000)
			// 鼠标移入停止轮播
			bg.onmouseover=function(){
				clearInterval(timer);
			}
			// 鼠标移出继续轮播
			bg.onmouseout=function(){
				timer = setInterval(Interval_banner,2000)
			}
			//右按钮
			right_btn.onclick=function(){
				i++;
				if(i==6){
					i = 0;
				}
				Banner_ul();
			}
			//左按钮
			left_btn.onclick=function(){
				i--;
				if(i==-1){
					i = 5;
				}
				Banner_ul();
			}
			//点击小圆点
			for(var j=0;j<cricle.length;j++){
				cricle[j].index = j;
				cricle[j].onclick = function(){
					i = this.index;
					Banner_ul();
				}
			}
			// 封装
			function Banner_ul(){
				for(var j=0;j<cricle.length;j++){
					cricle[j].style.background = "white";
				}
				cricle[i].style.background = "#c20c0c";
				
				Banner_opacity();
				bg.style.backgroundImage = "url("+picture[i]+")";
			
			}
		</script>
	</body>
</html>
